<script setup>
import { onMounted, computed, nextTick } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const handleClick = () => router.push("/ai");

const props = defineProps({
  item: Object,
  width: Number,
  height: Number,
});
let item = computed(() => JSON.parse(JSON.stringify(props.item)));
///获取元素 设置style 修改style变量
const getElement = (name, single = true) => {
  if (single) {
    let element = document.querySelector(
      `.step${item.value.stepIndex} ${name}`
    );
    return element;
  } else {
    let elements = document.querySelectorAll(
      `.step${item.value.stepIndex} ${name}`
    );
    return elements;
  }
};
const setStyle = (el, name, value) => {
  el.style[name] = value;
};
const setProperty = (el, name, value) => {
  el.style.setProperty(name, value);
};
const addEvent = (el, name, callBack) => {
  el.addEventListener(name, callBack);
};

const initStyle = () => {
  // 修改timeLine颜色
  let timeLine = getElement(".el-timeline");
  setProperty(timeLine, "--el-timeline-node-color", item.value.buttonColor);

  ///修改timeLine dot
  let dot = getElement(".el-timeline-item__node.is-hollow");
  setStyle(dot, "backgroundColor", item.value.buttonColor);

  ///修改button
  let buttons = getElement(".slider-item-buttons>div", false);
  for (let i = 0; i < buttons.length; i++) {
    setStyle(buttons[i], "color", item.value.buttonColor);
    setStyle(buttons[i], "borderColor", item.value.buttonColor);
    const addFn = () => {
      setStyle(buttons[i], "background", item.value.buttonColor);
      setStyle(buttons[i], "color", "white");
    };
    const removeFn = () => {
      setStyle(buttons[i], "backgroundColor", "transparent");
      setStyle(buttons[i], "color", item.value.buttonColor);
    };
    addEvent(buttons[i], "mouseenter", addFn);
    addEvent(buttons[i], "mouseleave", removeFn);
  }

  ///修改 boxColor
  let box = getElement(".slider-item-right-2");
  setStyle(box, "backgroundColor", item.value.boxColor);
};

onMounted(() => {
  nextTick(() => initStyle());
  // initStyle()
});
</script>
<template>
  <div
    class="slider-item"
    :class="'step' + item.stepIndex"
    :style="{
      backgroundImage: `url(${item.path})`,
      width: props.width + 'px',
      height: props.height + 'px',
    }"
  >
    <div class="l-main flex justify-between items-start">
      <div class="slider-item-left">
        <div class="slider-item-tit">
          {{ item.title }}
          <text id="titleAnimate" v-if="item.name == '创建营销需求'">_</text>
        </div>
        <div class="slider-item-tags mb-12">
          <div v-for="item in item.tags">
            {{ item }}
          </div>
        </div>
        <div>
          <el-timeline style="max-width: 400px">
            <el-timeline-item
              v-for="item in item.steps"
              :timestamp="item.timestamp"
              :hollow="item.hollow"
              :size="item.size"
              :type="item.type"
            >
              {{ item.tit }}
            </el-timeline-item>
          </el-timeline>
        </div>
        <div class="slider-item-buttons">
          <div v-for="item in item.buttons" @click="handleClick">
            {{ item.text }}
          </div>
        </div>
      </div>
      <div class="slider-item-right">
        <div class="slider-item-right-1">
          <div
            :style="{
              backgroundImage: `url(${item.gif})`,
              backgroundPosition: item.backgroundPosition,
              backgroundSize: item.backgroundSize,
            }"
          ></div>
          <div
            class="absolute right-2 -bottom-5"
            style="width: 85px; height: 121px; z-index: 3"
          ></div>
        </div>
        <div class="slider-item-right-2"></div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.slider-item {
  width: 100%;
  height: 100%;
  padding-top: 118px;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  .slider-item-left {
    width: 46%;
    .slider-item-tit {
      font-size: 52px;
      line-height: 58px;
      margin-bottom: 28px;
    }

    .slider-item-tags {
      display: flex;
      align-items: center;
      > div {
        padding: 4px 16px;
        background: linear-gradient(
          116deg,
          #f8b55c 0%,
          #f79955e4 50%,
          #f68250e0 100%
        );
        color: white;
        margin-right: 10px;
        border-radius: 2px;
      }
    }

    .slider-item-buttons {
      display: flex;
      align-items: center;
      > div {
        padding: 14px 20px;
        border-radius: 26px;
        margin-right: 16px;
        border: 1px solid;
        cursor: pointer;
      }
    }
  }
  .slider-item-right {
    transition: opacity ease 2s;
    width: 700px;
    height: 100%;
    position: relative;
    .slider-item-right-1 {
      position: absolute;
      z-index: 2;
      right: 57px;
      top: 57px;
      width: 604px;
      height: 373px;
      padding: 9px;
      box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.02);
      border-radius: 41px;
      background-color: rgba(255, 255, 255, 0.49);
      border: 2px solid #ffffff;
      > div {
        width: 100%;
        height: 100%;
        border-radius: 35px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
      }
    }
    .slider-item-right-2 {
      position: absolute;
      z-index: 1;
      right: 0;
      top: 0;
      width: 604px;
      height: 389px;
      box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.02);
      border-radius: 41px;
    }
  }
}
#titleAnimate {
  animation: cursor-blinks 1.5s infinite steps(1, start);
}
@keyframes cursor-blinks {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

:deep(.el-timeline-item__content) {
  font-size: 16px;
}
:deep(.el-timeline-item__timestamp) {
  font-size: 14px;
  color: #2c2f39;
  opacity: 0.8;
  font-weight: 300;
  line-height: 21px;
}
:deep(.el-timeline-item__wrapper) {
  top: -6px;
}
:deep(.el-timeline-item__node.is-hollow) {
  background: none;
  border-color: white;
}
</style>
